import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import { Icon, Tooltip, withTheme } from 'react-native-elements';

import InputClearable from './InputClearable';

const styles = theme => StyleSheet.create({
    fromContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 8,
        borderBottomWidth: 1,
        borderColor: theme.colors.grey3
    }
});

class FormInput extends React.Component {

    static propTypes = {
        ...InputClearable.propTypes,
        require: PropTypes.bool,
        label: PropTypes.string.isRequired,
        first: PropTypes.bool,
        onPress: PropTypes.func
    }



    render() {
        const { require, label, theme, first, onPress, ...rest } = this.props;
        const { value, placeholder } = rest;

        let rightIcon = rest.rightIcon;
        if (onPress) {
            rightIcon = {
                type: 'evilIcons',
                name: 'chevron-right',
                color: theme.colors.grey3
            };
        } else {
            if (require && !value) {
                rightIcon = <Tooltip
                    popover={<Text style={{ color: '#fff', fontWeight: 'bold' }}>{label}为必填项</Text>}
                    backgroundColor="#f00"
                    withOverlay={false}
                >
                    <Icon
                        type="font-awesome"
                        name="exclamation-circle"
                        color="#f00" />
                </Tooltip>;
            }
        }
        rest.rightIcon = rightIcon;

        if (!placeholder) {
            if (onPress) {
                rest.placeholder = `请选择${label}`;
            } else {
                rest.placeholder = `请输入${label}`;
            }

        }

        const WrapComponent = onPress ? TouchableWithoutFeedback : View;

        return (
            <WrapComponent onPress={onPress}>
                <View
                    style={StyleSheet.flatten([first && { borderTopWidth: 1 }, styles(theme).fromContainer])}
                >
                    <Text style={{ fontSize: 18 }}>{label}</Text>
                    {require && <Text style={{ color: '#f00' }}>*</Text>}
                    <InputClearable
                        {...rest}
                        editable={!onPress}
                        clear
                        containerStyle={{ flex: 1 }}
                        inputContainerStyle={{ borderBottomWidth: 0 }}
                    />
                </View>
            </WrapComponent>
        );
    }
}

export default withTheme(FormInput);